<!--
 * @Author: DT1604\ZPL zhoupeili@dpc.com.cn
 * @Date: 2022-05-16 14:40:23
 * @LastEditors: DT1604\ZPL zhoupeili@dpc.com.cn
 * @LastEditTime: 2022-08-26 15:11:03
 * @FilePath: \operation-platform-ui\src\views\businessSystem\chargingInformation\power.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <section class="Block">
    <!--  -->
    <a-spin tip="加载中..." class="position" v-if="detailLoading"> </a-spin>
    <div id="main" v-if="yData.length > 0" style="width: 100%; height: 600px"></div>
    <div class="nodata" v-if="!detailLoading && yData.length == 0">
      <img src="~@/assets/image/empty.png" alt="" />
      <p>暂无数据</p>
    </div>
  </section>
</template>
<script>
import * as echarts from 'echarts';
import { listUserChargings } from '@/api/cabin';
export default {
  props: {
    roleData: {
      type: Object,
      default: {},
    },
    // 区分归档订单
    archiveorder: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      charts: '',
      xData: [],
      yData: [],
      splitnum: 5,
      detailLoading: false,
    };
  },
  mounted() {
    this.getPowerData();
  },

  methods: {
    getPowerData() {
      this.detailLoading = true;
      let params = {
        chargingCabinetCode: this.roleData.cabinetCode,
        binIndex: this.roleData.binIndex,
        chargingOrderId: this.roleData.id,
      }
      if(this.archiveorder){
        params.createTime = decodeURIComponent(this.roleData.createTime);
      }
      listUserChargings('/diagram', 'post', params)
        .then((res) => {
          let datas = res.data;
          if (res.code == 200) {
            this.xData = datas.map((item) => {
              return item.receiveTime.split(` `).join(`\n`);
            });
            this.yData = datas.map((item) => {
              return item.value;
            });
            if (this.yData.length > 0 && this.yData.length <= 10) {
              this.splitnum = 0;
            }
            else if (this.yData.length > 10 && this.yData.length <= 50) {
              this.splitnum = 3;
            }
            else if (this.yData.length > 50 && this.yData.length <= 100) {
              this.splitnum = 10;
            } else if (this.yData.length > 100 && this.yData.length <= 200) {
              this.splitnum = 16;
            } else if (this.yData.length > 200 && this.yData.length <= 300) {
              this.splitnum = 35;
            } else if (this.yData.length > 300 && this.yData.length <= 400) {
              this.splitnum = 55;
            } else if (this.yData.length > 400 && this.yData.length <= 1000){
              this.splitnum = 100;
            }
            // 向上取整
            else {
              this.splitnum = Math.ceil(this.yData.length / 10);
            }
           
            if (this.yData.length > 0) {
              this.$nextTick(() => {
                this.drawLine('main');
              });
            }
          }
        })
        .finally(() => {
          this.detailLoading = false;
        })
        .catch((err) => {});
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));

      let options = {
        series: [
          {
            name: '充电功率',
            type: 'line',
            data: this.yData,
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: '#fb7636',
              borderColor: '#fff',
              borderWidth: 2,
            },
          },
        ],
        legend: {
          show: true,
          icon: 'circle',
          top: 0,
          textStyle: {
            fontSize: 12,
            color: '#afadad',
          },
        },
        grid: {
          left: '4%',
          right: '7%',
          top: '8%',
          bottom: '8%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
              color: '#f66643',
              width: 1,
              opacity: 1,
            },
          },
        },
        xAxis: {
          name: '时间',
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: this.xData,
          axisLine: { lineStyle: { color: '#8392a5' } },
          axisLabel: {
            interval: this.splitnum,
            // rotate: 10,
          },
        },
        yAxis: {
          scale: true,
          name: '充电功率:(W)',
          axisLine: { lineStyle: { color: '#8392a5' } },
          splitLine: { show: false },
        },
        dataZoom: [
          {
            textStyle: {
              color: '#5475c8',
            },
            dataBackground: {
              areaStyle: {
                opacity: 0.9,
                color: '#ff3131',
                width: 0.5,
              },
              lineStyle: {
                opacity: 0.9,
                color: '#ff3131',
                width: 0.5,
              },
            },
            type: 'slider',
            show: true,
            height: '3.5%',
            bottom: '12ph',
            borderColor: '#8FDFFE',
            backgroundColor: 'rgba(183,233,252,0.6)',
            handleIcon:
              'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
            handleColor: '#8FDFFE',
            handleSize: 15,
            start: 0,
            end: 100,
            brushSelect: true,
          },
          {
            type: 'inside',
          },
        ],
      };
      this.charts.setOption(options, true);
    },
  },
};
</script>
<style lang="less" scoped>
.Block {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
}
.position {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.03);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.nodata {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>